<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>GO机网管理后台</title>
	<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge">

	<link href="../../css/bootstrap.min.css" rel="stylesheet">
	<link href="css/nifty.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="js/webuploader-0.1.5/webuploader.css">
	<link href="../../css/demo/nifty-demo-icons.min.css" rel="stylesheet">
	<link href="../../plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
	<link href="../../plugins/pace/pace.min.css" rel="stylesheet">
	<script src="../../plugins/pace/pace.min.js?2016/8/5"></script>
	<style>
		#table p{
			padding: 5px;
			margin: 0;
			color: #757575;
		}
		td{
			vertical-align: middle!important;
		}

		.panel.active{
			border-color: #2ac845;
		}

		.red {
			color: red;
		}
		.fa {
			cursor: pointer;
		}
		.add-option {
			cursor: pointer;
		}
		ul {
			list-style-type: none;
			padding: 0;
		}
		.accordion {
			width: 100%;
			max-width: 360px;
			margin: 30px auto 20px;
			background: #FFF;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
		}

		.accordion .link {
			cursor: pointer;
			display: block;
			padding: 15px;
			background-color: rgb(102, 102 , 102);
			color: #fff;
			font-size: 14px;
			font-weight: 700;
			border-bottom: 1px solid #333;
			position: relative;
			text-align: center;
			-webkit-transition: all 0.4s ease;
			-o-transition: all 0.4s ease;
			transition: all 0.4s ease;
		}

		.accordion li:last-child .link {
			border-bottom: 0;
		}

		.accordion li i {
			position: absolute;
			top: 16px;
			left: 12px;
			font-size: 18px;
			color: #fff;
			-webkit-transition: all 0.4s ease;
			-o-transition: all 0.4s ease;
			transition: all 0.4s ease;
		}

		.accordion li i.fa-chevron-down {
			right: 12px;
			left: auto;
			font-size: 16px;
		}

		.accordion li.open i.fa-chevron-down {
			-webkit-transform: rotate(180deg);
			-ms-transform: rotate(180deg);
			-o-transform: rotate(180deg);
			transform: rotate(180deg);
		}

		/**
         * Submenu
         -----------------------------*/
		.submenu {
			display: none;
			background: #fff;
			font-size: 14px;
		}

		.submenu a {
			cursor: pointer;
			display: block;
			text-decoration: none;
			color: #333;
			padding: 12px;
			-webkit-transition: all 0.25s ease;
			-o-transition: all 0.25s ease;
			transition: all 0.25s ease;
		}

		.submenu a:hover,.submenu a.now {
			color: rgb(255, 177, 0);
		}

		.main-section-wrapper {
			margin-top: 30px;
			padding: 0;
		}
		.fee-wrapper {
			overflow: hidden;
			border: 1px solid #ccc;
		}
		.fee-wrapper > div {
			padding: 0;
			height: 60px;
			line-height: 60px;
			font-size: 16px;
		}
		.highest-price {
			text-align: right;
			padding-right: 30px !important;
		}
		.lowest-price {
			padding-left: 30px !important;
		}
		.highest-price > input,.lowest-price > input {
			text-align: right;
			border: none;
			width: 70px;
			height: 30px;
		}
		.add-selection {
			display: block;
			width: 100px;
			height: 40px;
			color: #fff;
			margin: 30px 0 25px;
			font-size: 15px;
			background-color: rgb(153, 153, 153);
		}
		.main-section-wrapper .section-header{
			height: 45px;
			line-height: 45px;
			text-align: center;
			font-size: 26px;
			background-color: rgb(230, 230, 230);
			border: 1px solid #ccc;
		}

		th {
			text-align: center;
		}
		.v-middle {
			text-align: center;
			vertical-align: middle !important;
		}
		.option-wrapper > div {
			width: 308px;
			height: 36px;
			line-height: 36px;
			margin: 10px auto;
			border: 1px solid #ccc;
			border-radius: 5px;
			text-align: center;
		}
		.option-wrapper .add-option {
			background-color: #999;
			color: #fff;
			text-align: center;
		}
		.fa {
			display:inline-block;
			margin-left:10px;
		}
	</style>
	<script src="../../js/jquery-2.2.1.min.js"></script>

</head>
<body>
<div id="container" class="effect mainnav-lg">
	@@include('public/header.html')
	<!--主体start-->
	<div class="boxed">

		<!--CONTENT CONTAINER-->
		<!--===================================================-->
		<div id="content-container">

			<!--Page Title-->
			<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
			<div id="page-title">
				<h1 class="page-header text-overflow">回收机费用设置</h1>
			</div>

			<div id="app-root" v-cloak>
				<div class="container">
					<div class="row">
						<div class="col-md-2">
							<ul id="accordion" class="accordion">
								<li class="" v-for="brand in brands">
									<div class="link" @click="brand_selected(brand.bid)">{{brand.b_name}}<i class="fa fa-chevron-down"></i></div>
									<ul class="submenu" style="display: none;">
										<li  v-for="version in brand.version" class="active"><a @click="version_selected(version.vid, $event)">{{version.v_name}}</a></li>
									</ul>
								</li>
							</ul>
						</div>
						<div class="col-md-9 main-section-wrapper">
							<div class="section-header">费用设置</div>
							<div class="fee-wrapper">
								<div class="col-md-6 highest-price">
									<span>最高回收价：</span>
									<input id="max-price" type="text" class="red" v-model="v_max_price" onkeyup="value=value.replace(/[^\d]/g,'')" @blur="set_max_price">
									<span class="red">元</span>
									<label class="fa fa-pencil" aria-hidden="true" for="max-price"></label>
								</div>
								<div class="col-md-6 lowest-price">
									<span>最低回收价：</span>
									<input id="min-price" type="text" class="red" v-model="v_min_price" onkeyup="value=value.replace(/[^\d]/g,'')" @blur="set_min_price">
									<span class="red">元</span>
									<label class="fa fa-pencil" aria-hidden="true" for="min-price"></label>
								</div>
							</div>
							<button class="btn btn-default add-selection" @click="add_category">添加选项</button>
							<table class="table table-bordered">
								<tr>
									<th width="150">选项分类</th>
									<th>必选</th>
									<th>单选</th>
									<th>选项</th>
								</tr>
								<tr v-for="category in categorys">
									<td class="v-middle">
										<span>{{category.c_name}}</span>
										<i class="fa fa-trash" aria-hidden="true" @click="delete_category(category.cid)"></i>
									</td>
									
									<td class="v-middle">
										<input type="checkbox" :checked="category.c_require == 1 ? true : false" :id="'category-require-' + category.cid" @change="update_category(category.cid)">
									</td>
									
									<td class="v-middle">
										<input type="checkbox" :checked="category.c_radio == 1 ? true : false" :id="'category-radio-' + category.cid" @change="update_category(category.cid)">
									</td>
									
									<td class="option-wrapper">
										<div v-for="option in category.option">
											<span>{{option.o_label}}(-{{option.o_price}}元)</span>
											<i class="fa fa-pencil" aria-hidden="true" @click="edit_option(['update',option.oid,option.o_label,option.o_price])"></i>
											<i class="fa fa-trash" aria-hidden="true" @click="delete_option(option.oid)"></i>
										</div>
										<div class="add-option" @click="edit_option(['add',category.cid])">添加</div>
									</td>
								</tr>
							</table>
						</div>
					</div>
					
					<!--添加机型状况-->
					<div class="modal fade" id="categoryModal" tabindex="-1" role="dialog" aria-labelledby="categoryModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
									<h4 class="modal-title" id="categoryModalLabel">{{c_title}}</h4>
								</div>
								<div class="modal-body"><input type="text" class="form-control" v-model="c_name"></div>
								<div class="modal-body hide">
									<label>是否必选：</label>
									<input id="o_require_no" type="radio" value="0" v-model="o_require">
									<label for="o_require_no">非必选</label>
									<input id="o_require_yes" type="radio" value="1" v-model="o_require">
									<label for="o_require_yes">必选</label>
								</div>
								<div class="modal-body hide">
									<label>是否单选：</label>
									<input id="o_radio_no" type="radio" value="0" v-model="o_radio">
									<label for="o_radio_no">非单选</label>
									<input id="o_radio_yes" type="radio" value="1" v-model="o_radio">
									<label for="o_radio_yes">单选</label>
								</div>
								<div class="modal-body" v-show="error">
									<div class="alert alert-danger" role="alert">
										<strong>Warning!</strong> {{error_message}}
									</div>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
									<button type="button" class="btn btn-primary" @click="submitCategory">确定</button>
								</div>
							</div>
						</div>
					</div>
					<!--添加机型-->
					<div class="modal fade" id="optionModal" tabindex="-1" role="dialog" aria-labelledby="optionModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
									<h4 class="modal-title" id="optionModalLabel">{{o_title}}</h4>
								</div>
								<div class="modal-body clearfix">
									<div class="col-md-4"><label>选项名称：</label></div>
									<div class="col-md-8"><input type="text" class="form-control" v-model="o_name"></div>
								</div>
								<div class="modal-body clearfix">
									<div class="col-md-4"><label>选项价格：-</label></div>
									<div class="col-md-8"><input type="text" class="form-control" v-model="o_price"></div>
								</div>
								<div class="modal-body" v-show="error">
									<div class="alert alert-danger" role="alert">
										<strong>Warning!</strong> {{error_message}}
									</div>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
									<button type="button" class="btn btn-primary" @click="submitOption">确定</button>
								</div>
							</div>
						</div>
					</div>
					
					<!---->
					<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
									<h4 class="modal-title" style="text-align: center;">是否确认删除？</h4>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
									<button type="button" class="btn btn-primary" data-dismiss="modal" @click="ok">确定</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>


		</div>
	</div>

	<nav id="mainnav-container">@@include('public/left_menu.html')
	</nav>
</div>
</body>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script src="../../plugins/fast-click/fastclick.min.js"></script>
<script src="../../js/nifty.min.js?2016/8/5"></script>
<script src="../../plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="js/vue.2.0.min.js"></script>
<script type="text/javascript" src="js/webuploader-0.1.5/webuploader.min.js"></script>
<script src="../../js/base.js"></script>
<script>
(function(){
	// var origin = "http://www.gojiw.com/gojiw/index/index_recycle/index.php../../index_recycle//index.php/Admin/Ajax/get_brand_version"
	var Accordion = function(el, multiple) {
		this.el = el || {};
		this.multiple = multiple || false;
		
		// Variables privadas
		var links = this.el.find('.link');
		// Evento
		links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
	}
	
	Accordion.prototype.dropdown = function(e) {
		var $el = e.data.el;
		$this = $(this),
			$next = $this.next();
		
		$next.slideToggle();
		$this.parent().toggleClass('open');
		
		if (!e.data.multiple) {
			$el.find('.submenu').not($next).slideUp().parent().removeClass('open');
		};
	}
	
	var app = new Vue({
		el: "#app-root",
		data: {
			brands: [],
			categorys: [],
			
			b_id: '',
			v_id: '',
			
			c_title: '',
			o_title: '',
			
			v_max_price: '',
			v_min_price: '',
			
			c_name: '',
			o_name: '',
			
			o_require: '0',
			o_radio: '0',
			o_price: '0',
			
			operation: [],
			
			error: 0,
			error_message: ''
		},
		created: function(){
			var _this = this;
			$.ajax({
				url: '../../index_recycle//index.php/Admin/Ajax/get_brand_version',
				type: 'GET',
				dataType: 'json',
				success: function(redata){
					if (redata.code == 200) {
						_this.brands = redata.data;
						setTimeout(function(){
							new Accordion($('#accordion'), false);
						},0);
					} else {
						console.log(redata.message);
					}
				},
				error: function(e){
					console.log(e);
				}
			});
		},
		methods: {
			ok: function(){
				this.delegate_delete();
			},
			delegate_delete: function(){},
			brand_selected: function(id){
				if (id !== undefined) this.b_id = id;
			},
			version_selected: function(id, e){
				if (e) $('#accordion li a').removeClass('now');
				if (e) $(e.target).addClass('now');
				var _this = this;
				if (id !== undefined) this.v_id = id;
				$.ajax({
					url: '../../index_recycle//index.php/Admin/Ajax/get_option_category',
					type: 'POST',
					dataType: 'json',
					data: { vid: this.v_id },
					success: function(redata){
						if (redata.code == 200) {
							var categorys = redata.data;
							_this.categorys = categorys.option_category;
							_this.v_max_price = categorys.recycle_cost.v_max_price;
							_this.v_min_price = categorys.recycle_cost.v_min_price;
							_this.c_name = '';
							_this.o_name = '';
						} else {
							console.log(redata.message);
						}
					},
					error: function(e){
						console.log(e);
					}
				});
				
			},
			set_max_price: function(){
				$.ajax({
					url: '../../index_recycle//index.php/Admin/Ajax/set_max_price',
					type: 'POST',
					dataType: 'json',
					data: {
						vid: this.v_id,
						max_price: this.v_max_price
					},
					success: function(redata){
						if (redata.code == 200) {
							console.log('设置成功');
						} else {
							console.log(redata.message);
						}
					},
					error: function(e){
						console.log(e);
					}
				});
			},
			set_min_price: function(){
				$.ajax({
					url: '../../index_recycle//index.php/Admin/Ajax/set_min_price',
					type: 'POST',
					dataType: 'json',
					data: {
						vid: this.v_id,
						min_price: this.v_min_price
					},
					success: function(redata){
						if (redata.code == 200) {
							console.log('设置成功');
						} else {
							console.log(redata.message);
						}
					},
					error: function(e){
						console.log(e);
					}
				});
			},
			edit_option: function(operation){
				this.c_title = '编辑选项';
				this.error = 0;
				this.error_message = '';
				this.o_name = operation[2];
				this.o_price = operation[3];
				$('#optionModal').modal('show');
				this.operation = operation;
			},
			add_category: function(){
				this.c_title = '添加选项';
				this.error = 0;
				this.error_message = '';
				$('#categoryModal').modal('show');
			},
			update_category: function(id){
				$.ajax({
					url: '../../index_recycle//index.php/Admin/Ajax/edit_option_category',
					type: 'POST',
					dataType: 'json',
					data: {
						cid: id,
						require: ($("#category-require-" + id).is(':checked') ? 1 : 0),
						radio: ($("#category-radio-" + id).is(':checked') ? 1 : 0)
					},
					success: function(redata){
						if (redata.code == 200) {
							console.log('更新成功');
						} else {
							console.log(redata.message);
						}
					},
					error: function(e){
						console.log(e);
					}
				});
			},
			delete_option: function(id){
				$('#confirmModal').modal('show');
				app.delegate_id = id;
				app.delegate_delete = function(){
					$.ajax({
						url: '../../index_recycle//index.php/Admin/Ajax/del_option',
						type: 'POST',
						dataType: 'json',
						data: { oid: app.delegate_id },
						success: function(redata){
							if (redata.code == 200) {
								console.log('删除成功');
								app.version_selected();
							} else {
								console.log(redata.message);
							}
						},
						error: function(e){
							console.log(e);
						}
					});
				};
			},
			delete_category: function(id){
				$('#confirmModal').modal('show');
				app.delegate_id = id;
				app.delegate_delete = function(){
					$.ajax({
						url: '../../index_recycle//index.php/Admin/Ajax/del_option_category',
						type: 'POST',
						dataType: 'json',
						data: { cid: app.delegate_id },
						success: function(redata){
							if (redata.code == 200) {
								console.log('删除成功');
								app.version_selected();
							} else {
								console.log(redata.message);
							}
						},
						error: function(e){
							console.log(e);
						}
					});
				}
			},
			submitOption: function(){
				var _this = this;
				if (!/^[\d]+$/g.test(this.o_price) || !this.o_name){
					this.error = 1;
					this.error_message = '请输入正确参数。';
					return false;
				}
				var url = '../../index_recycle//index.php/Admin/Ajax/add_option';
				var data = {
					label: this.o_name,
					price: this.o_price
				}
				if (this.operation[0] === 'update') {
					data.oid = this.operation[1];
					url = '../../index_recycle//index.php/Admin/Ajax/edit_option';
				}else{
					data.cid = this.operation[1];
				}
				$.ajax({
					url: url,
					type: 'POST',
					dataType: 'json',
					data: data,
					success: function(redata){
						if (redata.code == 200) {
							console.log('成功');
							_this.version_selected();
							$('#optionModal').modal('hide');
						} else {
							console.log(redata.message);
						}
					},
					error: function(e){
						console.log(e);
					}
				});
			},
			submitCategory: function(){
				var _this = this;
				if (!this.c_name) {
					this.error = 1;
					this.error_message = '请输入选项名称。';
					return false;
				}
				var data = {
					vid: this.v_id,
					name: this.c_name,
					require: this.o_require,
					radio: this.o_radio
				}
				$.ajax({
					url: '../../index_recycle//index.php/Admin/Ajax/add_option_category',
					type: 'POST',
					dataType: 'json',
					data: data,
					success: function(redata){
						if (redata.code == 200) {
							console.log('成功');
							$('#categoryModal').modal('hide');
							_this.version_selected();
						} else {
							console.log(redata.message);
						}
					},
					error: function(e){
						console.log(e);
					}
				});
			}
		}
	});
})();
</script>
</html>